<template>
    <div class="company-container">
        <div class="search-container">
            <div>
                <el-button type="success" icon="Plus" @click="handleAdd">新 增</el-button>
            </div>
            <!-- 按钮 && 查询 && 搜索 -->
            <el-form :model="queryParams" ref="queryParam" :inline="true" label-width="75px">
                <el-form-item label="公司名">
                    <el-input v-model="queryParams.username"  placeholder="请输入" style="width: 220px" clearable></el-input>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" icon="Search" v-preventDoubleClick @click="getTableData">查 询</el-button>
                </el-form-item>
            </el-form>
        </div>

        <!--Table-->
        <h-table :list="list" :total="total" :options="options" :operates="operates" :columns="setting.columns" @pagination="getTableData" @handleSelectionChange="handleSelectionChange"/>
        <pagination v-show="total > 0" :total="total" v-model:page="queryParams.pageNum" v-model:limit="queryParams.pageSize" @pagination="getTableData"/>

        <!--Dialog-->
        <el-dialog :title="dialog1.title" :width="dialog1.dWidth" v-model="dialog1.show" :append-to-body="false" :close-on-click-modal="false" :close-on-press-escape="false">
            <el-form ref="formInfo" :model="dialog1.formInfo" :rules="dialog1.rules" label-width="75px" label-position="left">
                <el-form-item label="公司名" prop="">
                    <el-input v-model.trim="dialog1.formInfo.username" :style="dialog1.width" :disabled="dialog1.formInfo.systemUserId!=undefined"></el-input>
                </el-form-item>
            </el-form>
            <template #footer>
                <el-button type="primary" v-preventDoubleClick @click="submitDialog1">确 定</el-button>
                <el-button @click="dialog1Close">取 消</el-button>
            </template>
        </el-dialog>
    </div>
</template>

<script setup name="Home">
import setting from  './setting'
const { proxy } = getCurrentInstance()

/** Data */
//Table
const table = reactive({
    list:[],
    total:0,
    queryParams: {
        pageNum: 1,
        pageSize: 10,
    },
    options: {// table 配置的参数
        stripe: true,
        loading: false,
        highlightCurrentRow: true,
        mutiSelect: true
    },
    operates: {// table 配置的参数
        width: 160,
        fixed: "right",
        label: "操作",
        list: [
            {
                id: "mdf", label: "修改", link: true, type: "primary",show: true, disabled: false,
                method: (index, row) => {
                    handleEdit(row)
                }
            },
            {
                id: "ddd", label: "删除", link: true, type: "primary", show: true, disabled: false,
                method: (index, row) => {
                    handleDel(row)
                }
            }
        ]
    }
})
const { list, total, queryParams, options, operates } = toRefs(table);

/** dialog*/
const dialog = reactive({
    dialog1: {
        show: false,
        title:'新增',
        dWidth: '550px',
        width:'width:220px',
        rules: setting.rules,
        roleOptions:[],
        formInfo:{
            username:'',
            nickName:'',
            phone:'',
            systemRoleId: '',
        },
    }
})
const { dialog1 } = toRefs(dialog)

/** 生命周期钩子 */
onMounted(()=>{
    getTableData()
})

/** Method */
/** Table*/
//表单数据
async function getTableData() {
    let _ = proxy
    options.value.loading = true
    const {data: res} = await _.$H.post(_.$A.fault.faultPage, queryParams.value)
    list.value = res.data.list || []
    total.value = res.data.total || 0
    options.value.loading = false
}
//删除
function handleDel(row) {
    let _ = proxy
    let delData = { systemUserIdList:[row.systemUserId] }
    _.$modal.confirm("确认删除该条记录？", "删除", () => {
        // delOne(delData)
    })
}
//单条删除
async function delOne(id){
    let _ = proxy
    const { data: res } = await _.$H.post(_.$A.systemUser.del, JSON.stringify(id))
    if(res.code==200){
        _.$modal.msgSuccess('删除成功！')
    }else {}
    getTableData()
}
/** Dialog1 */
//新增
function handleAdd() {
    let _ = proxy
    dialog1.value.show = true
}
function handleEdit() {
    let _ = proxy
    dialog1.value.show = true
}
//提交按钮
function submitDialog1() {
    let _ = proxy
    _.$refs["dialog1Form"].validate(async (valid) => {
        if (valid) {
            if(dialog1.value.formInfo.systemUserId==undefined){
                const { data: res } = await _.$H.post(_.$A.systemUser.add, dialog1.value.formInfo)
                if(res.code==200){
                    _.$modal.msgSuccess('提交成功！')
                }else {}
            }else {
                const { data: res } = await _.$H.post(_.$A.systemUser.update, dialog1.value.formInfo)
                if(res.code==200){
                    _.$modal.msgSuccess('修改成功！')
                }else {}
            }
            getTableData()
            dialog1.value.show = false
        }
    })
}
//dialog1关闭
function dialog1Close() {
    dialog1.value.show  = false
    reset()
}
//dialog1重置表单
function reset() {
    let _ = proxy
    dialog1.value.formInfo = {
        username: '',
    }
    _.resetForm("formInfo")
}
</script>

<style lang="less" scoped>
    @import "index.less";
</style>
